const reactive = Vue.reactive
const ref = Vue.ref
const shallowRef = Vue.shallowRef
const customRef = Vue.customRef


const myComputed = (_get, _set) => {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        if (typeof _get === 'function') {
          return _get()
        } else {
          console.warn(`没有设置 get 方法`)
        }
      },
      set(newValue) {
        if (typeof _set === 'function') {
          _set(newValue)
          trigger()
        } else {
          console.warn(`没有设置 set 方法`)
        }
      }
    }
  })
}

/**
 * ref 的结构
 * 属性的深层响应性
 * 
*/
export default {
  name: 'ref-mycomputed',
  template: `
    <div>
      展示 自定义 的 customRef 实现计算属性 <br>
      ref 对象：{{refCount}} <br><br>
      自定义的计算属性 对象：{{myCom}} <br><br>
      <input v-model="myCom" type="text">
      <el-button @click="update" type="primary">修改属性</el-button><br><br>
    </div>
  `,
  setup () {
    // 查看 reactive 实例结构
    const refCount = ref(0)
    console.log('refCount ', refCount )

    // const myCom = myComputed(() => refCount.value + 1)
    const myCom = myComputed(() => refCount.value, (val) => { refCount.value = val})

    const update = () => {
      // 修改原型
      refCount.value = 3
    }


    const setRef = () => {
      // 直接赋值
      refCount.value += 1
    }

    return {
      refCount, // 基础类型
      myCom, // 引用类型
      update, // 修改属性
      setRef // 直接设置
    }
  }
}
  